<template>
  <div>
    <template v-for="item in treeData">
      <div
        v-if="
          item.children &&
          item.children.length > 0 &&
          item.children[0].menuType != 'F'
        "
        v-hasPermi="[item.perms]"
      >
        <el-submenu :index="item.menuId + ''" :key="item.menuId">
          <template slot="title">
            &#8197;<i :class="'fa ' + item.icon"></i> &#12288;<span
              slot="title"
            >
              {{ item.name }}</span
            >
          </template>
          <HomeAsideTree :treeData="item.children"></HomeAsideTree>
        </el-submenu>
      </div>

      <!--index里面存放需要跳转的路由地址，条抓到/components/home/main.vue中的路由里面-->
      <div v-else-if="item.menuType != 'F'" v-hasPermi="[item.perms]">
        <el-menu-item :index="item.path" :key="item.id" @click="select(item)">
          &#8197;<i :class="'fa ' + item.icon"></i> &#12288;<span
            slot="title"
            >{{ item.name }}</span
          >
        </el-menu-item>
      </div>
    </template>
  </div>
</template>

<script>
export default {
  name: "HomeAsideTree",
  props: ["treeData"],
  data() {
    return {};
  },
  computed: {
    isCollapse() {
      return this.$store.state.tab.isCollapse;
    },
  },
  mounted() {},

  methods: {
    select(item) {
      this.$store.commit("selectMenu", item);
    },
  },
};
</script>

<style>
/*隐藏文字 */
.el-menu--collapse .el-submenu__title span {
  display: none;
}
/*隐藏 > */
.el-menu--collapse .el-submenu__title .el-submenu__icon-arrow {
  display: none;
}
</style>
